<template>
  <div>
    <div class="mainbox">
      <ul class="ckearfix">
        <li>
          <div class="boxall">
            <div class="alltitle">
              考试数据
            </div>
            <div
              id="echart1"
              ref="chart"
              class="allnav"
            ></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall">
            <div class="alltitle">
              培训数据
            </div>
            <div
              id="echart1"
              ref="chart2"
              class="allnav"
            ></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall">
            <div class="alltitle">
              进行中的考试
            </div>
            <div
              id="echart1"
              class="allnav"
            >
              <el-table
                ref="tableRef"
                :data="tableData"
                :row-style="{ height: 0 + 'px' }"
                :cell-style="{ padding: 3 + 'px' }"
                height="90%"
                :header-cell-style="tableHeaderColor"
                style="width: 100%; border-top: 1px solid #03a2a2"
              >
                <el-table-column
                  prop="title"
                  label="教室"
                  width="80"
                ></el-table-column>

                <el-table-column
                  prop="examinationName"
                  label="考试名称"
                ></el-table-column>

                <el-table-column
                  prop="address"
                  label="考试人数"
                  width="120"
                >
                  <template slot-scope="scope">
                    应到人数：{{ scope.row.shouldAttend }}
                    <br />
                    实到人数：{{ scope.row.actualNumber }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="endTime"
                  label="考试时间"
                  width="160"
                >
                  <template slot-scope="scope">
                    {{ scope.row.startTime }}&nbsp;--&nbsp;{{
                      scope.row.endTime
                        .replace(" ", ":")
                        .replace(/\:/g, "-")
                        .split("-")[3]
                    }}:{{ scope.row.endTime.replace(/\:/g, "-").split("-")[3] }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="usersName"
                  label="监考人"
                ></el-table-column>
              </el-table>
            </div>
            <div class="boxfoot"></div>
          </div>
        </li>
        <li>
          <div class="bar">
            <div class="barbox">
              <ul class="clearfix">
                <li class="pulll_left counter">
                  {{ totalSignUp }}
                </li>
                <li class="pulll_left counter">
                  {{ totalPass }}
                </li>
              </ul>
            </div>
            <div class="barbox2">
              <ul class="clearfix">
                <li class="pulll_left">
                  总报名人数
                </li>
                <li class="pulll_left">
                  通过考试人数
                </li>
              </ul>
            </div>
            <div class="map">
              <div class="map1">
                <img src="../../assets/lbx.png" />
              </div>
              <div class="map2">
                <img src="../../assets/jt.png" />
              </div>
              <div class="map3">
                <img src="../../assets/map.png" />
              </div>
              <div
                id="map_1"
                class="map4"
              >
                <img
                  src="../../assets/cent.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="boxall">
            <div
              id="echart1"
              ref="chart3"
              class="allnav"
            ></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall">
            <div
              id="echart1"
              ref="chart4"
              class="allnav"
            ></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall">
            <div class="alltitle">
              未进行的考试
            </div>
            <div
              id="echart1"
              class="allnav"
            >
              <el-table
                ref="tableRef2"
                :data="tableData2"
                :row-style="{ height: 0 + 'px' }"
                :cell-style="{ padding: 3 + 'px' }"
                height="90%"
                :header-cell-style="tableHeaderColor"
                style="width: 100%; border-top: 1px solid #03a2a2"
              >
                <el-table-column
                  prop="title"
                  label="教室"
                  width="80"
                ></el-table-column>

                <el-table-column
                  prop="examinationName"
                  label="考试名称"
                ></el-table-column>

                <el-table-column
                  prop="address"
                  label="考试人数"
                  width="120"
                >
                  <template slot-scope="scope">
                    应到人数：{{ scope.row.shouldAttend }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="endTime"
                  label="考试时间"
                  width="160"
                >
                  <template slot-scope="scope">
                    {{ scope.row.startTime }}&nbsp;--&nbsp;{{
                      scope.row.endTime
                        .replace(" ", ":")
                        .replace(/\:/g, "-")
                        .split("-")[3]
                    }}:{{ scope.row.endTime.replace(/\:/g, "-").split("-")[3] }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="usersName"
                  label="监考人"
                ></el-table-column>
              </el-table>
            </div>
            <div class="boxfoot"></div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  underExam,
  statistics,
  futureExam,
  statuExam,
  statuTraining,
  statuEquipment,
  statuRooms
} from "@/api";
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// import {LegendComponent} from ' charts/components'
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, PieChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
} from "echarts/components";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  PieChart,
  CanvasRenderer,
]);

export default {
  data() {
    return {
      myChart: "",
      myChart2: "",
      totalPass: "", // 通过考试总人数
      totalSignUp: "", // 总注册人数
      tableData: [],
      tableData2: [],
      page: 1,
      limit: 50,
    };
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.chart);
    this.myChart2 = echarts.init(this.$refs.chart2);
    this.myChart3 = echarts.init(this.$refs.chart3);
    this.myChart4 = echarts.init(this.$refs.chart4);

    // 列表滚动
    let divData = this.$refs.tableRef.bodyWrapper;
    let divData2 = this.$refs.tableRef2.bodyWrapper;
    setInterval(() => {
      // 元素自增距离顶部1像素
      divData.scrollTop += 1;
      divData2.scrollTop += 1;
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
        // 重置table距离顶部距离
        divData.scrollTop = 0;
      }
      if (divData2.clientHeight + divData2.scrollTop == divData2.scrollHeight) {
        divData2.scrollTop = 0;
      }
    }, 100);
    this.unders();
    this.fuders();
    this.querexams();
    this.examStatus();
    this.training();
    this.equipmentStatus();
    this.roomStatus();
    this.setveal = setInterval(() => {
      this.unders();
      this.fuders();
      this.querexams();
      this.examStatus();
      this.training();
      this.equipmentStatus();
      this.roomStatus();

    }, 1000 * 60);
  },
  destroyed() {
    clearInterval(this.setveal);
  },
  methods: {
    // 进行中的考试
    unders(page = this.page, limit = this.limit) {
      underExam({ page, limit }).then((res) => {
        this.tableData = res.data;
      });
    },
    // 未进行的考试 futureExam
    fuders(page = this.page, limit = this.limit) {
      futureExam({ page, limit }).then((res) => {
        this.tableData2 = res.data;
      });
    },
    // 获取人数
    querexams() {
      statistics().then((res) => {
        if (res.result_code == 200) {
          this.totalPass = res.data.totalPass;
          this.totalSignUp = res.data.totalSignUp;
        }
      });
    },
    // 查询考试信息 饼图
    examStatus() {
      statuExam().then((res) => {
        let { totalExam, totalExamPass, totalExamSignUp } = res.data;
        this.myChart.setOption({
          tooltip: {
            trigger: "item",
          },
          series: [
            {
              name: "考试数据",
              type: "pie",
              radius: "50%",
              data: [
                { value: totalExam, name: `考试人数 ${totalExam}`   },
                { value: totalExamPass, name: `通过人数 ${totalExamPass}` },
                { value: totalExamSignUp, name: `报名人数 ${totalExamSignUp}` },
              ],
              label: {
                show: true,
                position: "outside",
                color: "#fff",
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
              //  itemStyle: {
              //   normal: {
              //     color: function (params) {
              //       var colorList = ["#4E41A1", "#59D4F5","#FFC000"];
              //       return colorList[params.dataIndex];
              //     },
              //   },
              // },
            },
          ],
        });
      });
    },

    //查询培训信息 柱状图
    training() {
      statuTraining().then((res) => {
        let { totalTraining, totalTrainingPass, totalTrainingSignUp } =
          res.data;
        this.myChart2.setOption({
          tooltip: {},
          xAxis: {
            data: ["报名人数", "培训人数", "通过人数"],
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#fff",
                width: "1",
              },
            },
          },
          yAxis: [
            {
              splitLine: { show: false },
              splitArea: { show: false }, //保留网格区域
              axisLine: {
                lineStyle: {
                  type: "solid",
                  color: "#fff",
                  width: "2",
                },
              },
            },
          ],
          series: [
            {
              name: "培训数据",
              type: "bar",
              data: [totalTrainingSignUp, totalTraining, totalTrainingPass],
              itemStyle: {
                normal: {
                  color: function (params) {
                    var colorList = ["#a9d18e", "#73C0DE", "#ffc000"];
                    return colorList[params.dataIndex];
                  },
                },
              },
              barWidth:40,
            },
          ],
        });
      });
    },

    // 获取设备信息
    equipmentStatus() {
      statuEquipment().then((res) => {
        let { count, use } = res.data;
        this.myChart3.setOption({
          tooltip: {
            trigger: "item",
          },
          title: {
            text: "设备总数 "+count,
          
            textStyle: {
              color: "#fff",
              fontSize: "18",
              fontFamily: "electronicFont",
            },
            
            left: "center",
          },
          series: [
            {
              name: "设备数据",
              type: "pie",
              radius: "50%",
              data: [
                { value: Math.round((use / count) * 100), name: `使用率${Math.round((use / count) * 100)}% `  },
                { value: Math.round((count - use) / count * 100), name: `空置率${Math.round((count - use) / count * 100)}%` },
              ],
              label: {
                show: true,
                position: "outside",
                color: "#fff",
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        });
      });
    },

    // 获取房间信息
    roomStatus(){
      statuRooms().then(res=>{
        console.log(res.data);
        let { totalRoom, totalRoomUse } = res.data;
        this.myChart4.setOption({
          tooltip: {
            trigger: "item",
          },
          title: {
            text: "教室总数 " + totalRoom,
            // subtext: totalRoom,
            textStyle: {
              color: "#fff",
              fontFamily: "electronicFont",
              fontSize: "18",
            },
           
            left: "center",
          },
          series: [
            {
              name: "教室数据",
              type: "pie",
              radius: "50%",
              data: [
                { value: Math.round((totalRoomUse / totalRoom) * 100), name: `使用率${Math.round((totalRoomUse / totalRoom) * 100)}%` },
                { value: Math.round((totalRoom - totalRoomUse) / totalRoom * 100), name: `空置率${Math.round((totalRoom - totalRoomUse) / totalRoom * 100)}%` },
              ],
              label: {
                show: true,
                position: "outside",
                color: "#fff",
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        });
      })
    },
    tableHeaderColor({ rowIndex }) {
      if (rowIndex === 0) {
        return "background-color: #009A9A50;color: #fff;font-weight: 500;'font-size':'14px';height:20px;padding:8px 0";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.clearfix:after,
.clearfix:before {
  display: table;
  content: "";
}
.mainbox {
  padding: 3px 3px 0 3px;
  .ckearfix {
    & > li {
      width: 30%;
      float: left;
    }
    & > li:nth-child(2) {
      width: 40%;
      padding: 0;
    }
    & > li:nth-child(odd) > div:nth-child(3) {
      width: 160%;
    }
    & > li:nth-child(3) > div:nth-child(3) {
      left: -64%;
    }
    .boxall {
      height: 27vh;
      border: 1px solid rgba(25, 186, 139, 0.17);
      padding: 0 5px 5px 10px;
      background: rgba(255, 255, 255, 0.04);
      background-size: 100% auto;
      position: relative;
      margin-bottom: 10px;
      z-index: 10;
    }

    .boxfoot {
      position: absolute;
      bottom: 0;
      width: 100%;
      left: 0;
    }
    .boxfoot:before,
    .boxfoot:after {
      position: absolute;
      width: 10px;
      height: 10px;
      content: "";
      border-bottom: 2px solid #02a6b5;
      bottom: 0;
    }
    .boxall::after,
    .boxfoot::after {
      right: 0px;
      border-right: 2px solid rgb(2, 166, 181);
    }
    .boxall::before,
    .boxall::after {
      position: absolute;
      width: 10px;
      height: 10px;
      content: "";
      top: 0px;
      border-top: 2px solid rgb(2, 166, 181);
    }
  }

  .el-table,
  .el-table__expanded-cell {
    background: #ffffff18;
    color: white;
  }
  .el-table th,
  .el-table tr {
    background: #fff0;
  }

  .alltitle {
    color: white;
    font-size: 18px;
    font-weight: bold;
  }
  .boxall:before,
  .boxfoot:before {
    border-left: 2px solid #02a6b5;
    left: 0;
  }
  .boxall:after,
  .boxfoot:after {
    border-right: 2px solid #02a6b5;
    right: 0;
  }

  .bar {
    background: rgba(101, 132, 226, 0.1);
    padding: 0 10px 10px;
  }
  .barbox li,
  .barbox2 li {
    width: 50%;
    text-align: center;
    position: relative;
    z-index: 100;
  }
  .barbox:before,
  .barbox:after {
    position: absolute;
    width: 20px;
    height: 10px;
    content: "";
  }
  .barbox:before {
    border-left: 2px solid #02a6b5;
    left: 0;
    border-top: 2px solid #02a6b5;
  }
  .barbox:after {
    border-right: 2px solid #02a6b5;
    right: 0;
    bottom: 0;
    border-bottom: 2px solid #02a6b5;
  }
  .barbox li:first-child:before {
    position: absolute;
    content: "";
    height: 50%;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
    right: 0;
    top: 25%;
  }

  .barbox {
    border: 1px solid rgba(25, 186, 139, 0.17);
    position: relative;
  }
  .barbox li {
    font-size: 46px;
    color: #ffc000;
    padding: 5px 0;
    font-family: electronicFont;
    font-weight: bold;
  }
  .barbox2 li {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    padding-top: 10px;
  }
}

.clearfix:after {
  clear: both;
}
.pulll_left {
  float: left;
}
.pulll_right {
  float: right;
}

.map {
  position: relative;
  height: 45vh;
  z-index: 9;
  img {
    width: 100%;
  }
}
.map4 {
  width: 110%;
  height: auto;
  position: relative;
  top: 0;
  left: 0;
  z-index: 5;
  opacity: 1;
}
.map1,
.map2,
.map3 {
  position: absolute;
  opacity: 0.5;
}
.map1 {
  width: 80%;
  z-index: 2;
  top: 40px;
  left: 10%;
  animation: myfirst2 15s infinite linear;
}
.map2 {
  width: 65%;
  top: 79px;
  left: 18%;
  z-index: 3;
  opacity: 0.2;
  animation: myfirst 10s infinite linear;
  transform: translateX(-50%);
}
.map3 {
  width: 60%;
  top: 100px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
}

#echart1 {
  width: 100%;
  height: 99%;
  color: white;
}

@keyframes myfirst2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}
</style>
